<template>
  <div id="picture-detail">
    <a-row :gutter="[16, 16]">
      <!-- 图片展示区 -->
      <a-col :sm="24" :md="16" :xl="18">
        <a-card>
          <template #title>
            <h2 class="title-bar">图片预览</h2>
          </template>
          <!-- 图片容器，用于居中处理 -->
          <div class="image-center-container">
            <a-image :src="picture.url" style="max-height: 600px; object-fit: contain" />
          </div>
        </a-card>
      </a-col>

      <!-- 图片信息区 -->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息">
          <!-- 统计按钮组：横向排列，图标+数字上下布局 -->
          <div class="stats-group">
            <!-- 点赞 -->
            <div class="stat-item like-item" @click="doLikePicture">
              <component :is="picture.isLike ? LikeFilled : LikeOutlined" class="stat-icon" />
              <span class="stat-text">{{ picture.likeCount ?? 0 }}</span>
            </div>
            <!-- 评论 -->
            <div class="stat-item comment-item" @click="doOpenCommentModal">
              <CommentOutlined class="stat-icon" />
              <span class="stat-text">{{ picture.commentCount ?? 0 }}</span>
            </div>
            <!-- 分享 -->
            <div class="stat-item share-item" @click="doShare">
              <ShareAltOutlined class="stat-icon" />
            </div>
            <!-- 下载 -->
            <div class="stat-item download-item" @click="doDownLoadPicture">
              <DownloadOutlined class="stat-icon" />
            </div>
          </div>
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="picture.user?.userAvatar" />
                <div>{{ picture.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <!-- 优化后的标签 -->
              <a-tag v-for="tag in picture.tags" :key="tag" class="custom-tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="尺寸">
              {{ picture.picWidth ?? '-' }}×{{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) }}
            </a-descriptions-item>
            <a-descriptions-item label="色调">
              <a-space>
                {{ picture.picColor?.substring(2) ?? '-' }}
                <div
                  v-if="picture.picColor"
                  :style="{
                    height: '16px',
                    width: '16px',
                    background: toHexColor(picture.picColor),
                  }"
                ></div>
              </a-space>
            </a-descriptions-item>
          </a-descriptions>
          <!-- 优化后的按钮 -->
          <a-space wrap class="button-group">
            <a-button v-if="canEdit" type="default" @click="doEdit" class="edit-button">
              编辑
              <template #icon>
                <EditOutlined />
              </template>
            </a-button>
            <a-popconfirm
              title="您确定要删除该图片吗？（删除后将永久消失）"
              ok-text="确认"
              cancel-text="取消"
              @confirm="doDelete"
            >
              <a-button v-if="canDelete" class="delete-button" type="primary" danger ghost
                >删除
                <template #icon>
                  <DeleteOutlined />
                </template>
              </a-button>
            </a-popconfirm>
            <a-button
              v-if="
                loginUser.userRole === 'admin' &&
                picture.reviewStatus !== PIC_REVIEW_STATUS_ENUM.PASS &&
                !picture.spaceId
              "
              type="default"
              @click="doReviewPicture(picture, PIC_REVIEW_STATUS_ENUM.PASS)"
              class="pass-button"
            >
              通过
              <template #icon>
                <CheckOutlined />
              </template>
            </a-button>
            <a-button
              v-if="
                loginUser.userRole === 'admin' &&
                picture.reviewStatus !== PIC_REVIEW_STATUS_ENUM.REJECT &&
                !picture.spaceId
              "
              danger
              @click="showModal(picture)"
              class="reject-button"
            >
              拒绝
              <template #icon>
                <CloseOutlined />
              </template>
            </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>

    <!-- 点击评论时弹出的对话框提示  -->
    <PictureCommentModal
      ref="pictureCommentModalRef"
      :picture="picture"
    />

    <!--  点击拒绝时弹出的对话框提示  -->
    <a-modal
      v-model:open="open"
      title="拒绝图片展示"
      @ok="doReviewPicture(currentPicture, PIC_REVIEW_STATUS_ENUM.REJECT)"
      @cancel="doCancel"
    >
      <a-input v-model:value="reviewMessageByReject" placeholder="请输入拒绝原因（可选）" />
    </a-modal>
  </div>

  <!--  点击分享时弹出的对话框提示  -->
  <ShareModal
    ref="shareModalRef"
    :link="shareLink"
    :title="picture.name"
    :picture="picture"
    :user="picture.user"
  />
</template>

<script setup lang="ts">
// 【业务代码完全保留，未做任何修改】
import { useRoute, useRouter } from 'vue-router'
import { computed, h, onMounted, ref } from 'vue'
import {
  deletePictureUsingPost,
  doReviewPictureUsingPost,
  getPictureVoByIdUsingGet,
} from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { downloadImage, formatSize, toHexColor } from '@/util'
import {
  EditOutlined,
  DeleteOutlined,
  DownloadOutlined,
  CheckOutlined,
  CloseOutlined,
  ShareAltOutlined,
  LikeFilled,
  LikeOutlined,
  CommentOutlined
} from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/userLogin'
import { PIC_REVIEW_STATUS_ENUM, PICTURE_LIKE_ENUM } from '@/constants/picture'
import ShareModal from '@/components/modal/ShareModal.vue'
import { SPACE_PERMISSION_ENUM } from '@/constants/space'
import PictureCommentModal from '@/components/modal/PictureCommentModal.vue'
import { addLikedUsingPost } from '@/api/likedController'

const route = useRoute()
const router = useRouter()

// 定义props，接收图片id
interface props {
  id: string | number
}

const props = defineProps<props>()
const picture = ref<API.PictureVO>({})

// --------- 图片权限控制 ---------
// 通用权限检查函数
function createPermissionChecker(permission: string) {
  return computed(() => {
    return (picture.value.permissionList ?? []).includes(permission)
  })
}

// 定义权限检查
const canEdit = createPermissionChecker(SPACE_PERMISSION_ENUM.PICTURE_EDIT)
const canDelete = createPermissionChecker(SPACE_PERMISSION_ENUM.PICTURE_DELETE)

// 根据图片id获取详情
const fetchPictureById = async () => {
  try {
    const res = await getPictureVoByIdUsingGet({
      id: props.id as number,
    })
    if (res.data?.code === 0 && res.data?.data) {
      picture.value = res.data.data
    } else {
      message.error('加载图片详情失败: ' + res.data?.message)
    }
  } catch (error: any) {
    message.error('加载图片详情失败: ' + error.message)
  }
}

// 获取当前登录用户
const loginUser = ref<API.UserVO>({})

const getLoginUser = async () => {
  const userLoginStore = useLoginUserStore()
  loginUser.value = userLoginStore.loginUser
}

// ---------- 评论 -------------
// 评论弹窗引用
const pictureCommentModalRef = ref()

// 打开评论弹窗
const doOpenCommentModal = () => {
  if(pictureCommentModalRef.value){
    pictureCommentModalRef.value.openModal()
  }
}

// ----------- 点赞 -------------
// 点赞
const doLikePicture = async () => {
  // 先获取当前点赞状态（默认未点赞，避免 undefined）
  const currentIsLike = picture.value.isLike ?? false; // 当前是否已点赞
  const currentLikeCount = Number(picture.value.likeCount ?? 0); // 强制转为数字类型

  // 2. 预更新本地状态（优化用户体验：点击立即反馈，不用等接口）
  picture.value.isLike = !currentIsLike; // 切换是否点赞状态
  // 根据操作更新点赞数：未点赞→+1，已点赞→-1
  picture.value.likeCount = currentIsLike ? currentLikeCount - 1 : currentLikeCount + 1;

  const res = await addLikedUsingPost({
    pictureId: picture.value.id,
    target: PICTURE_LIKE_ENUM.PICTURE,
  })

  if (res.data.code === 0 && res.data.data) {
    // 本地反转状态：当前未点赞→true（点赞），当前已点赞→false（取消）
    picture.value.isLike = !currentIsLike
    // 提示文案与状态同步
    message.success(picture.value.isLike ? '点赞成功 ' : '取消点赞成功')
  } else {
    message.error('点赞失败')
  }
}

// 下载逻辑：调用方法下载图片
const doDownLoadPicture = () => {
  downloadImage(picture.value.url)
}

// ------------- 分享 --------------
// 分享弹窗引用
const shareModalRef = ref()
// 分享链接
const shareLink = ref<string>()

// 分享
const doShare = () => {
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/${picture.value.id}`
  if (shareModalRef.value) {
    shareModalRef.value.openModal()
  }
}

// 编辑逻辑：跳转到编辑页并传参
const doEdit = () => {
  router.push({
    path: '/picture/add',
    query: {
      id: props.id,
      spaceId: picture?.value.spaceId,
    },
  })
}

// 删除逻辑：调用接口删除并处理结果
const doDelete = async () => {
  const res = await deletePictureUsingPost({
    id: props.id as number,
  })
  if (res.data?.code === 0 && res.data.data) {
    message.success('删除成功')
    router.back()
  } else {
    message.error('删除失败' + res.data?.message)
  }
}

// 弹出对话框
const open = ref<boolean>(false)
// 定义用户填写的拒绝原因
const reviewMessageByReject = ref<string>('')
// 定义对话框接收的currentPicture图片信息
const currentPicture = ref<API.PictureVO>({})

// 显示对话框
const showModal = (picture: API.PictureVO) => {
  open.value = true
  currentPicture.value = picture
}

// 点击取消时触发
const doCancel = () => {
  reviewMessageByReject.value = ''
  open.value = false
}

// 审核图片
const doReviewPicture = async (picture: API.PictureVO, reviewStatus: number) => {
  // 进行前端显示的映射
  const reviewStatusMessage =
    reviewStatus === PIC_REVIEW_STATUS_ENUM.PASS
      ? '审核通过'
      : ' 拒绝，' + reviewMessageByReject.value
  const res = await doReviewPictureUsingPost({
    id: picture.id,
    reviewStatus,
    reviewMessage: reviewStatusMessage,
  })
  if (res.data?.code === 0 && res.data.data) {
    message.success('操作成功')
    // 清空取消拒绝原因数据
    reviewMessageByReject.value = ''
    // 关闭对话框
    open.value = false
    router.back()
  } else {
    message.error('操作失败' + res.data?.message)
  }
}

// 页面挂载时获取图片信息
onMounted(() => {
  // 获取当前图片信息
  fetchPictureById()
  // 获取当前登录用户信息
  getLoginUser()
})
</script>

<style scoped>
/* 页面整体容器样式 */
#picture-detail {
  background-color: #e6ffe6;
  padding: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.title-bar {
  font-size: 18px !important;
  text-align: center !important;
  font-weight: bold;
}

/* 图片居中容器 */
.image-center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background-color: #e1eedf;
  border-radius: 8px;
}

/* 卡片样式 */
.a-card {
  border-radius: 8px;
  border: 1px solid #d9f2d9;
  background-color: #f0f0f0 !important;
}

/* 卡片标题样式 */
.a-card-header {
  color: #333 !important;
  border-bottom: 1px solid #d9f2d9 !important;
  background-color: #f0f0f0 !important;
  border-radius: 8px 8px 0 0 !important;
}

/* 统计按钮组：横向排列，间距控制 */
.stats-group {
  display: flex;
  align-items: center;
  gap: 12px; /* 按钮间距 */
  margin-bottom: 16px; /* 与下方描述列表的间距 */
}

/* 单个按钮：垂直布局，卡片化 */
.stat-item {
  display: flex;
  flex-direction: column; /* 图标+数字上下排列 */
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 按钮交互反馈 */
.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 图标样式：放大，与文字间距 */
.stat-icon {
  font-size: 20px;
  margin-bottom: 4px; /* 图标与文字的间距 */
}

/* 数字样式：缩小，加粗 */
.stat-text {
  font-size: 12px;
  font-weight: 500;
}

/* 不同按钮的背景色（可自定义） */
.like-item {
  background-color: #ff6b6b; /* 红色-点赞 */
}

.comment-item {
  background-color: #4ecdc4; /* 青色-评论 */
}

.share-item {
  background-color: #45b7d1; /* 蓝色-分享 */
}

.download-item {
  background-color: #a3d8f4; /* 浅蓝-下载 */
}

/* 描述列表项样式 */
.a-descriptions-item {
  color: #666;
  margin-bottom: 8px;
  background-color: #f0f0f0 !important;
  padding: 6px;
  border-radius: 4px;
}

/* 描述列表标签样式 */
.a-descriptions-item-label {
  color: #333;
  font-weight: bold;
}

/* 头像与用户名组合区域样式 */
.a-space {
  align-items: center;
  background-color: #f0f0f0 !important;
  padding: 6px;
  border-radius: 4px;
}

/*
  标签样式优化（核心调整1）
  - 增加圆角和阴影，提升质感
  - 调整间距和内边距，更精致
  - 添加hover动画，增强交互
*/
.custom-tag {
  margin-right: 8px !important; /* 标签右侧间距 */
  margin-bottom: 8px !important; /* 标签底部间距 */
  padding: 5px 12px !important; /* 内边距，让标签更饱满 */
  background-color: #d0e8d0 !important; /* 比原来稍深的绿色，更突出 */
  color: #2d6a2d !important; /* 深绿色文字，与背景呼应 */
  border: none !important; /* 去除边框 */
  border-radius: 20px !important; /* 大圆角，更柔和 */
  font-size: 13px !important; /* 适中字体大小 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; /* 轻微阴影，提升层次感 */
  transition: all 0.2s ease !important; /* 过渡动画 */
}

/* 标签hover效果 */
.custom-tag:hover {
  background-color: #b8e0b8 !important; /* hover时加深背景色 */
  transform: translateY(-1px) !important; /* 轻微上移，增强交互感 */
}

/*
  按钮组容器（核心调整2）
  - 统一按钮位置和间距
*/
.button-group {
  margin-top: 15px !important; /* 与上方内容保持距离 */
  padding-top: 10px !important; /* 顶部内边距，分隔区域 */
  border-top: 1px dashed #e0e0e0 !important; /* 分隔线，区分功能区 */
}

/*
  编辑按钮样式
  - 绿色主题，与整体风格呼应
  - 强化hover效果
*/
.edit-button {
  background-color: #4caf50 !important; /* 主色调绿色 */
  color: white !important; /* 白色文字 */
  border: none !important; /* 去除边框 */
  padding: 6px 16px !important; /* 内边距，按钮更舒展 */
  font-weight: 500 !important; /* 中等加粗 */
}

.edit-button:hover {
  background-color: #3d9140 !important; /* hover时加深绿色 */
  transform: translateY(-2px) !important; /* 上移动画 */
  box-shadow: 0 4px 8px rgba(61, 107, 62, 0.2) !important; /* 绿色阴影 */
}

/*
  删除按钮样式
  - 优化红色色调，更柔和
  - 增强交互反馈
*/
.delete-button {
  background-color: #f85a5a !important; /* 稍浅的红色，不刺眼 */
  color: white !important; /* 白色文字 */
  border: none !important; /* 去除边框 */
  padding: 6px 16px !important; /* 与编辑按钮统一大小 */
  font-weight: 500 !important; /* 中等加粗 */
  transition: all 0.2s ease !important; /* 过渡动画 */
}

.delete-button:hover {
  background-color: #e53e3e !important; /* hover时加深红色 */
  transform: translateY(-2px) !important; /* 上移动画 */
  box-shadow: 0 4px 8px rgba(131, 14, 14, 0.2) !important; /* 红色阴影 */
}

/*
  通过按钮样式
  - 强化hover效果
*/
.pass-button {
  background-color: #4ca3af !important;
  color: white !important; /* 白色文字 */
  border: none !important; /* 去除边框 */
  padding: 6px 16px !important; /* 内边距，按钮更舒展 */
  font-weight: 500 !important; /* 中等加粗 */
}

.pass-button:hover {
  background-color: #4ca3af !important;
  transform: translateY(-2px) !important; /* 上移动画 */
  box-shadow: 0 4px 8px rgb(57, 105, 112) !important; /* 绿色阴影 */
}

/*
  拒绝按钮
  - 增强交互反馈
*/
.reject-button {
  background-color: #f85a5a !important; /* 稍浅的红色，不刺眼 */
  color: white !important; /* 白色文字 */
  border: none !important; /* 去除边框 */
  padding: 6px 16px !important; /* 与编辑按钮统一大小 */
  font-weight: 500 !important; /* 中等加粗 */
  transition: all 0.2s ease !important; /* 过渡动画 */
}

.reject-button:hover {
  background-color: #e53e3e !important; /* hover时加深红色 */
  transform: translateY(-2px) !important; /* 上移动画 */
  box-shadow: 0 4px 8px rgba(131, 14, 14, 0.2) !important; /* 红色阴影 */
}

/* 按钮基础样式（确保不冲突） */
:deep(.a-button) {
  border-radius: 6px;
  margin-right: 8px;
  transition: all 0.3s ease;
}

/* 图片样式 */
.a-image {
  max-width: 100%;
  max-height: 600px;
  object-fit: contain;
  border-radius: 8px;
}

</style>
